<template>
    <div>
        <div class="upload_box">
            <div class="upload_content" v-if="images.length !=0" v-for="(item,index) in images" @click="viewClick">
                <div class="upload_content_img_Box">
                    <image class="upload_content_img" :src="item" style="width:100px;height:100px"></image>
                </div>
                <text class="cancelIcon" @click="cancelImgClick(index)">&#xe61a;</text>
            </div>

            <div class="upload_content" v-if="video.length !=0" v-for="(item,index) in video" @click="videoClick(item)">
                <div class="upload_content_img_Box">
                    <video class="upload_content_img" controls="nocontrols" :src="item"></video>
                </div>
                <text class="cancelIcon" @click="cancelVideoClick(index)">&#xe61a;</text>
            </div>
            <div class="upload_botton" @click="pick">
                <text class="bottonIcon">&#xe634;</text>
            </div>
        </div>
        <div class="isMask" v-if="metaType == true" @click="viewClick">
            <div @click="">
                <slider class="slider" interval="3000" @change="changeHandler">
                    <div class="frame" v-for="img in images">
                        <image class="image" resize="cover" :src="img"></image>
                    </div>
                    <div class="frame" v-for="img in video">
                        <video class="image" :play-status="state" :src="img" autoplay controls
                               @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
                    </div>
                </slider>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        policy
    } from '@/api/oss'

    const picture = app.requireModule("eeui/picture");
    const network = app.requireModule("eeui/network");
    const picker = weex.requireModule('picker')
    export default {
        data() {
            return {
                array: ['上传照片', '上传视频'],
                index: 0,
                previewImgs: [],
                images: [],
                previewVideo: [],
                video: [],
                dataObj: {
                    policy: '',
                    signature: '',
                    key: '',
                    ossaccessKeyId: '',
                    dir: '',
                    host: ''
                },
                host: "",
                metaType: false,
                uuid: '',
                typePath: [],
                value: 0,
                imageList: [
                    {src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
                    {src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
                    {src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
                ],
                state: 'pause',
            }
        },
        created() {
            this.beforeUpload()
            this.initIconFont()
        },
        methods: {

            beforeUpload() {
                let _self = this;
                policy({mchId: this.getGlobalData().mchId}).then(response => {
                    _self.dataObj.policy = response.data.policy;
                    _self.dataObj.signature = response.data.signature;
                    _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
                    _self.dataObj.dir = response.data.dir;
                    _self.dataObj.key = response.data.dir + '/' + _self.uuid + "${filename}";
                    _self.dataObj.host = response.data.action;
                    _self.host = response.data.host
                }).catch(err => {
                    console.log(err)
                })
            },
            fileClick() {
                var _this = this
                _this.uuid = this.getUUID()
                picture.create({
                    gallery: 0,
                    mode: 1
                }, function (result) {
                    if (result.status == 'success') {
                        console.log(result)
                        var tempFilePath = result.lists[0].path
                        _this.uploadImg(tempFilePath)
                    }
                });
            },
            // 上传图片
            uploadImg(filePath) {
                let _this = this;
                console.log(filePath)
                eeui.loading();
                var typePath = filePath;
                _this.typePath = typePath.split('.')
                _this.dataObj.key = _this.dataObj.dir + '/' + _this.uuid + '.' + _this.typePath[_this.typePath.length - 1];
                network.upload({
                    url: _this.dataObj.host,
                    path: filePath,
                    name: 'file',
                    formData: _this.dataObj,
                }, (ret) => {
                    console.log(ret)
                    if (ret.status == 200 || ret.status == 204) {
                        if (_this.value == 0) {
                            _this.images.push(_this.dataObj.host + '/' + _this.dataObj.dir + '/' + _this.uuid + '.' + _this.typePath[_this.typePath.length - 1]);
                            console.log(_this.images)
                        } else if (_this.value == 1) {
                            _this.video.push(_this.dataObj.host + '/' + _this.dataObj.dir + '/' + _this.uuid + '.' + _this.typePath[_this.typePath.length - 1]);
                            console.log(_this.video)
                        }
                        var metaData = {
                            images: _this.images,
                            video: _this.video,
                        }
                        _this.$emit("metaClick", metaData)

                    }
                    if (ret.status != 100) {
                        eeui.loadingClose();
                    }
                })
            },
            pick() {
                picker.pick({
                    items: ['照片', '视频']
                }, event => {
                    if (event.result === 'success') {
                        this.value = event.data
                        this.fileClick()
                    }
                })
            },
            onstart(event) {
                this.state = 'onstart'
            },
            onpause(event) {
                this.state = 'onpause'
            },
            onfinish(event) {
                this.state = 'onfinish'
            },
            onfail(event) {
                this.state = 'onfinish'
            },
            cancelImgClick(data) {
                var _this = this
                this.images.splice(data, 1)
                var metaData = {
                    images: _this.images,
                    video: _this.video,
                }
                _this.$emit("metaClick", metaData)
            },
            cancelVideoClick(data) {
                var _this = this
                this.video.splice(data, 1)
                var metaData = {
                    images: _this.images,
                    video: _this.video,
                }
                _this.$emit("metaClick", metaData)
            },
            viewClick() {
                picture.picturePreview(0, this.images)
            },
            changeHandler() {
                this.state = 'pause'
            },
            videoClick(item) {
                picture.videoPreview(item)
            }
        }
    }
</script>

<style scoped>
    .upload_box {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .upload_content {
        width: 160px;
        height: 160px;
        position: relative;
        margin-right: 25px;
        margin-left: 25px;
        overflow: hidden;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .iconBox {
        position: absolute;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 140px;
    }

    .upload_content_img {
        width: 100px;
        height: 100px;
        overflow: hidden;
    }

    .cancelIcon {
        font-size: 30px;
        font-family: iconfont2;
        position: absolute;
        top: 4px;
        right: 4px;
        color: red;
    }

    .upload_botton {
        /*width: 122px;*/
        /*height: 122px;*/
      width: 300px;
      height: 300px;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 45px;
        margin-bottom: 30px;
        margin-left: 45px;
        border-width: 1px;
        border-style: solid;
        /*border-color: rgba(232, 234, 237, 1);*/
      border-color: grey;
      margin-top: 30px;

    }

    .bottonIcon {
        font-size: 40px;
        color: rgba(232, 234, 237, 1);
        font-family: iconfont2;
    }

    .isMask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: row;
        align-items: center;
    }


    .image {
        width: 700px;
        height: 700px;
    }

    .slider {
        margin-top: 25px;
        margin-left: 25px;
        width: 700px;
        height: 700px;
        z-index: 1;
        border-radius: 10px;
        overflow: hidden;
    }

    .frame {
        width: 700px;
        height: 700px;
        position: relative;
    }

    .upload_content_img_Box {
        width: 122px;
        height: 122px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.1);
    }
</style>
